<template>
  <div v-loading="loading" class="app-container">
    <el-row>
      <el-col>
        <div style="background: #f6f9fe;padding: 0 10px; border-radius: 8px;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="多选优化发件" name="second">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-form label-width="120px" :model="JDForm">
                    <el-form-item :rules="[{ required: true, message: '请填写打单单号', trigger: 'blur' }]" label="京东打单单号" prop="jdVariableWaybillNo">
                      <el-input v-model="JDForm.jdVariableWaybillNo" style="width: 200px;"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row class="mb8" :gutter="10">
                <el-col :span="1.5">
                  <el-button type="primary" @click="handleSeachRate">价格查询</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="info" @click="openEmptyCost">清空运费成本</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="info" @click="openEmptyCost">手动清空运费成本</el-button>
                </el-col>
              </el-row>
              <el-scrollbar style="height: 300px;">
                <el-table
                  border
                  :data="multipleOptions"
                
                  @selection-change="handleSelectMultiple"
                >
                  <el-table-column type="selection" align="center" width="45"></el-table-column>
                  <el-table-column
                    label="托运人"
                    show-overflow-tooltip
                    align="center"
                    width="170"
                    prop="shipperName"
                  ></el-table-column>
                  <el-table-column label="类型" align="center" prop="type"></el-table-column>
                  <el-table-column label="价格" align="center" prop="price"></el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                      <el-button
                        v-if="row.price"
                        text
                        class="my_button"
                        @click="generateTransfer(row)"
                      >
                        生成转单
                      </el-button>
                      <div v-else>请先查价</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="标签发票列表" name="third">
              <el-row class="mb8" :gutter="10">
                <el-col :span="1.5">
                  <el-button type="primary" @click="refresh">更新标签</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="info" @click="refresh">刷新</el-button>
                </el-col>
              </el-row>
              <el-scrollbar style="height: 300px;">
                <el-table border :data="sysTagInfoS">
                  <el-table-column type="index"></el-table-column>
                  <el-table-column align="center" label="标签">
                    <template #default="{ row }">
                      <el-button text style="color: #1890ff;" @click="handleDownLabel(row)">下载</el-button>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="仅标签不对的时候用这个下载标签"
                        placement="top"
                      >
                        <el-button text style="color: #1890ff; margin-left: 8px;" @click="downLabel(row)">重新下载</el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="创建时间" prop="createDate"></el-table-column>
                </el-table>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col>
        <el-tabs v-model="activeName2">
          <el-tab-pane name="recipientInformation">
            <h3>收件人信息</h3>
            <el-row>
              <el-col :span="24">
                <el-form
                  ref="currentOrderForm"
                   
                  label-width="100px"
                  class="paneForm"
                  inline
                  :rules="rules2"
                  :model="currentOrder"
                >
                  <el-row>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="UPS_GFP">
                        <el-input v-model="currentOrder.upsGfpName"></el-input>
                      </el-form-item>
                    </el-col>
                 
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="收件人代码：" prop="sjrdm">
                        <el-input v-model="currentOrder.sjrdm" placeholder="请输入收件人代码"></el-input>
                        <!-- <customer-name   v-model="currentOrder.sjrdm" :address="handleChangeAddress" /> -->
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="姓名" prop="consigneeName">
                        <el-input v-model="currentOrder.consigneeName" placeholder="请输入姓名"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-form-item label="带GFP标识">
                      <el-checkbox v-model="currentOrder.upsGfp"></el-checkbox>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="国家" prop="consigneeCountry">
                        <el-select
                          v-model="currentOrder.consigneeCountry"
                           
                          style="width: 200px;"
                          placeholder="请输入内容"
                        >
                          <el-option
                            v-for="dict in dicts[DictDirection.国家]"
                            :key="dict.countryCode"
                            :label="dict.countryChName"
                            :value="dict.countryCode"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="邮编" prop="consigneePostcode">
                        <el-input v-model="currentOrder.consigneePostcode" placeholder="请输入邮编"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="公司" prop="consigneeCompany">
                        <el-input v-model="currentOrder.consigneeCompany" placeholder="请输入公司"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="城市" prop="consigneeCity">
                        <el-input v-model="currentOrder.consigneeCity" placeholder="请输入城市"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="省州" prop="provinceStateCode">
                        <el-input v-model="currentOrder.provinceStateCode" placeholder="请输入省州"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="8"
                      :xs="24"
                      :sm="8"
                      :md="8"
                      :lg="8"
                      :xl="8"
                    >
                      <el-form-item label="电话" prop="consigneeTel">
                        <el-input v-model.trim="currentOrder.consigneeTel" placeholder="请输入电话"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
               
                  <el-row>
                    <el-col
                      :span="12"
                      :xs="24"
                      :sm="12"
                      :md="12"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item class="item_container" label="地址1" prop="consigneeAddress">
                        <el-input
                          v-model="currentOrder.consigneeAddress"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          clearable
                          placeholder="请输入地址"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                 
                    <el-col
                      :span="12"
                      :xs="24"
                      :sm="12"
                      :md="12"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item class="item_container" label="地址2">
                        <el-input
                          v-model="currentOrder.consigneeAddress2"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          placeholder="请输入地址"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="GFP Class">
                    <el-select v-model="currentOrder.gfpClass" filterable placeholder="请选择 GFP Class 类型">
                      <!-- <el-option v-for="dict in gfp_classDicts" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option> -->
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Packge Type">
                    <el-select v-model="currentOrder.packageType" filterable placeholder="请选择 Packge Type">
                      <!-- <el-option v-for="dict in packge_typeDicts" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option> -->
                    </el-select>
                  </el-form-item>
                  <el-row>
                    <el-col
                      :span="12"
                      :xs="24"
                      :sm="12"
                      :md="12"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item label="是否住宅">
                        <el-radio-group v-model="currentOrder.isResidence">
                          <el-radio :label="1">是</el-radio>
                          <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="12"
                      :xs="24"
                      :sm="12"
                      :md="12"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item label="是否偏远：">
                        <el-radio-group v-model="isRemote">
                          <el-radio :label="1">是</el-radio>
                          <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col class="my-divider">
        <el-divider></el-divider>
      </el-col>
      <el-col :span="24">
        <el-row class="mb8">
          <div><h3>包裹信息</h3></div>
        </el-row>
        <div class="top-right-btn">
          <el-form
            ref="selectForm"
            style="display: inline-block;"
            inline
            :model="selectForm"
          >
            <el-row>
              <el-col
                :span="6"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-form-item label="实重" prop="weight">
                  <el-input-number
                    v-model="selectForm.weight"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col
                :span="6"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-form-item label="长度" prop="length">
                  <el-input-number
                    v-model="selectForm.length"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col
                :span="6"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-form-item label="宽度" prop="width">
                  <el-input-number
                    v-model="selectForm.width"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col
                :span="6"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-form-item label="高度" prop="height">
                  <el-input-number
                    v-model="selectForm.height"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div
            class="ups-tol"
            style="display: inline-flex;"
          >
            <div class="ups-words">ups class总值:{{ sysOrderInfo.upsClassTotal }}</div>
            <div style="margin-left: 50px;">
              <el-button
                :disabled="isDetail"
                class="compute"
                type="primary"
                text
                :icon="Refresh"
                @click="calculate"
              >
                计算逃重class值
              </el-button>
            </div>
          </div>
          <div style="float: right;">
            <el-button type="primary" :icon="Plus" @click="handleAddPackage">增加包裹</el-button>
            <el-button
              type="primary"
              :disabled="isDetail"
              :icon="DocumentChecked"
              @click="submitPackage"
            >
              保存
            </el-button>
            <el-button type="primary" @click="handleSelectRow">筛选</el-button>
          </div>
        </div>
        <el-form
          ref="sysOrderInfos"
          :model="sysOrderInfo"
          :rules="rules"
          inline
          :disabled="isDetail"
          class="matInfoTOWS mb8"
        >
          <el-table
            ref="upsTable"
            height="350"
            :data="sysOrderInfo.matInfoTOWS"
            @selection-change="handleCurrentChange"
          >
            <el-table-column type="selection" align="center" width="60"></el-table-column>
            <el-table-column
              type="index"
              align="center"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              width="100px"
              align="center"
              label="实重(kg)"
              prop="weight"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`matInfoTOWS.${$index}.weight`">
                  <el-input-number
                    v-model="row.weight"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="100px"
              align="center"
              label="长度(cm)"
              prop="length"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`matInfoTOWS.${$index}.length`">
                  <el-input-number
                    v-model="row.length"
                    :min="2.54"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="100px"
              align="center"
              label="宽度(cm)"
              prop="width"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`matInfoTOWS.${$index}.width`">
                  <el-input-number
                    v-model="row.width"
                    :min="2.54"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="100px"
              align="center"
              label="高度(cm)"
              prop="height"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`matInfoTOWS.${$index}.height`">
                  <el-input-number
                    v-model="row.height"
                    :min="2.54"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="体积重(kg)"
              width="120"
              prop="vWeight"
            ></el-table-column>
            <el-table-column
              align="center"
              label="计费重(kg)"
              width="120"
              prop="jWeight"
            ></el-table-column>
            <el-table-column align="center" label="实重(磅)" prop="bweight"></el-table-column>
            <el-table-column
              width="100px"
              align="center"
              label="件数"
              prop="pieceNumber"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`matInfoTOWS.${$index}.pieceNumber`">
                  <el-input-number
                    v-model="row.pieceNumber"
                    :min="1"
                    style="width: 90px;"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="ups class值"
              width="120"
              prop="upsClass"
            ></el-table-column>
            <el-table-column align="center" label="逃重class" prop="escapeHeavyClass"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
              <template #default="{ row, $index }">
                <el-form-item>
                  <el-button :icon="Delete" text @click="delPackage(row, $index)"></el-button>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-row>
          <el-col :span="1.5">
            <el-button
              :disabled="isDetail"
               
              type="primary"
              @click="handleAddPackage"
            >
              增加包裹
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-row class="sums">
            <el-col :span="4">合计</el-col>
            <el-col :span="4">实重：{{ sums.totalWeight }}</el-col>
            <el-col :span="4">体积重：{{ sums.vWeight }}</el-col>
            <el-col :span="4">计费重：{{ sums.jWeight }}</el-col>
            <el-col :span="4">实重：{{ sums.bweight }}</el-col>
            <el-col :span="4">件数：{{ sums.shipmentTotal }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 清空运费成本的对话框 -->
    <el-dialog
      v-model="open"
      title="清空运费成本"
      width="420px"
      :append-to-body="true"
      class="abow_dialog"
    >
      <el-form
        ref="freightCostLists"
        :model="freightCostList"
        :rules="freightCostListRules"
        label-width="80px"
      >
        <el-form-item label="托运人" prop="shipperName">
          <el-select
            v-model="freightCostList.shipperName"
            filterable
            style="width: 240px;"
            placeholder="请选择"
          >
            <!-- <el-option v-for="item in shippingList" :key="item.shipperName" :label="item.shipperName" :value="item.shipperName"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="主转单号" prop="trackingNumber">
          <el-input
            v-model.trim="freightCostList.trackingNumber"
            text
            placeholder="请输入主转单号"
            style="width: 240px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model.trim="freightCostList.remarks"
            type="textarea"
            placeholder="请输入备注"
            style="width: 240px;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checked">
          <div style="color: #f00;font-size: 12px;margin-left: 5px;line-height: 16px;">正常清空成本运费，无需勾选！</div>
          <el-checkbox v-model="freightCostList.checked">手动清空成本</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clearPrice">确定</el-button>
        <el-button @click="cancelClearPrice()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { Delete, Refresh, Plus, DocumentChecked } from '@element-plus/icons-vue'
import { ref, defineAsyncComponent, getCurrentInstance } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { initUpsData } from '@/api/expressManager/orderList'

const { proxy } = getCurrentInstance() as any
const loading = ref(false)
const dicts = useDicts()
dicts.setDicts(DictDirection.国家)
let currentOrderForm = ref(null),
  freightCostLists = ref(null),
  {
    appContext: {
      config: {
        // eslint-disable-next-line no-empty-pattern
        globalProperties: { },
      },
    },
  } = getCurrentInstance()
const orderNoss = ref(null)
const open = ref(false)
const activeName = ref('second')
const activeName2 = ref('recipientInformation')
const multipleOptions = ref([])
const JDForm = ref({
  jdVariableWaybillNo: '',
})
const sysTagInfoS = ref([])
const currentOrder = ref({
  upsGfpName: '',
  upsGfp: '',
  sjrdm: '',
  consigneeName: '',
  consigneeCountry: '',
  consigneePostcode: '',
  consigneeCompany: '',
  consigneeCity: '',
  provinceStateCode: '',
  consigneeTel: '',
  consigneeAddress: '',
  consigneeAddress2: '',
  gfpClass: '',
  packageType: '',
  isResidence: '',
})
const sysOrderInfos = ref(undefined)
const sysOrderInfo = ref({
  upsClassTotal: '',
  matInfoTOWS: [],
  
})
const selectForm = ref({
  weight: '',
  length: '',
  width: '',
  height: '',
  startRow: '',
  endRow: '',
})

const isDetail = ref(false)
const isRemote = ref(undefined)
const freightCostList = ref({
  shipperName: '',
  trackingNumber: '',
  remarks: '',
  checked: '',
})
const rules2 = ref({})
const rules = ref({})
const freightCostListRules = {
  shipperName: [
    {
      required: true,
      message: '托运人不能为空',
      trigger: 'blur',
    },
  ],
  trackingNumber: [
    {
      required: true,
      message: '主转单号不能为空',
      trigger: 'blur',
    },
  ],
  remarks: [
    {
      required: true,
      message: '备注不能为空',
      trigger: 'blur',
    },
  ],
}
const sums = ref({
  totalWeight: '',
  vWeight: '',
  jWeight: '',
  bweight: '',
  shipmentTotal: '',
})

const getSums = () => {
  console.log(sysOrderInfo.value.matInfoTOWS)
}
const handleCurrentChange = () => {}
const handleSelectMultiple = (row: { [key: string]: any }) => {
  console.log(row)
}
// 添加包裹
const handleAddPackage = () => {}
// 生成转单
const generateTransfer = (row: { [key: string]: any }) => {
  console.log(row)
}
// 清空运费成本
const openEmptyCost = () => {

}
// 价格查询
const handleSeachRate = () => {

}
// 下载
const handleDownLabel = (row: { [key: string]: any }) => { console.log(row) }
// 重新下载
const downLabel = (row: { [key: string]: any }) => { console.log(row) }
// 刷新
const refresh = () => {}
// 计算逃重class值
const calculate = () => {}
// 保存
const submitPackage = () => {}
const handleSelectRow = () => {}
const delPackage = (row: { [key: string]: any }, index) => {
  ElMessageBox.confirm('此操作将永久删除该包裹信息, 是否继续?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => {
    sysOrderInfo.value.matInfoTOWS.splice(index, 1)
    ElMessage.success('删除成功')
  })
  .catch(() => {
    ElMessage.error('删除失败')
  })
}
const clearPrice = () => {}
const cancelClearPrice = () => {}

const initList = () => {
  loading.value = true
  const orderNo = orderNoss.value
  initUpsData(orderNo).then(res => {
    loading.value = false
    console.log(11)
    sysOrderInfo.value.matInfoTOWS = res.data.matInfoTOWS
    JDForm.value.jdVariableWaybillNo = orderNo
    console.log(111)
    getSums()
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  initList,
  loading,
  orderNoss,
})
</script>
<style lang='less' scoped>
.top-right-btn {
  padding: 10px;
}
:deep(.el-form-item__content) {
  width: 256px;
}
:deep(.el-select-dropdown__item) {
  display: inline-block;
}
:deep(.el-dialog) {
  display: flex;
  display: -ms-flex; /* 兼容IE */
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
:deep(.my-divider > .el-divider--horizontal) {
  margin-top: 0;
}
.sum {
  position: absolute;
  bottom: 0;
  left: 0;
}
:deep(.item_container .el-form-item__content) {
  width: calc(100% - 100px) !important;
}
:deep(.el-dialog .el-dialog__body) {
  max-height: 100%;
  flex: 1;
  flex: 1 1 auto; /* 兼容IE */
  overflow-y: auto;
  overflow-x: hidden;
}
:deep(.matInfoTOWS.el-form--inline > .el-form-item) {
  margin-bottom: 0;
}
.item_container {
  width: 85%;
}
.my_button {
  padding: 0 10px;
}
.dpf {
  display: flex;
  align-items: center;
  /deep/.ups-tol {
    display: inline-flex;
    align-items: center;
    .ups-words {
      font-size: 14px;
      color: #606266;
      font-weight: 600;
      line-height: 35px;
    }
    .compute {
      margin: 0 20px;
    }
  }
}
.my-autocomplete {
  min-width: 130px;
  width: auto !important;
  li {
    line-height: 14px;
    padding: 7px;
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }
    .highlighted .addr {
      color: #ddd;
    }
  }
}

</style>